<script setup>
import { ref } from 'vue'
import SearchHint from './SearchHint.vue'
import Search from '../../../libs/Search/Search.vue'
import HeaderTheme from './HeaderTheme.vue'
import HeaderMy from './HeaderMy.vue'

const modelValue = ref('搜索吧')
const handleSearch = (val) => {
  console.log('触发事件没问题', val)
  modelValue.value = val
}
</script>
<template>
  <div class="container flex p-4 dark:bg-slate-800 duration-500">
    <div class="logo mr-4">
      <img src="https://res.lgdsunday.club/my-avatar.jpg" alt="" class="h-12" />
    </div>
    <Search v-model="modelValue" @search="handleSearch" class="search flex-1">
      <!-- itemClick事件在SearchHint组件里面触发了，但是 handleSearch方法不执行
      排插可能跟插槽有关，把SearchHint写在其他地方handleSearch方法就执行了 -->
      <SearchHint :searchText="modelValue" @itemClick="handleSearch" />
    </Search>

    <!-- 主题切换 -->
    <div class="theme flex items-center mx-4 z-40">
      <HeaderTheme />
    </div>
    <!-- 登录头像 -->
    <div class="my mr-4 z-40">
      <HeaderMy />
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
